<template>
  <div>
    <div class="head">
      <div @click="dataSourceVisible = true">
        <ImgButton>
          <template v-slot:name>获取数据</template>
          <template v-slot:image>
            <img src="@/assets/image/head/获取数据2.png" />
          </template>
        </ImgButton>
      </div>
      <div @click="concatBoxVisible = true">
        <ImgButton>
          <template v-slot:name>多表关联</template>
          <template v-slot:image>
            <img src="@/assets/image/head/多表关联.png" />
          </template>
        </ImgButton>
      </div>

      <div @click="mergeSplitBoxVisible = true">
        <ImgButton>
          <template v-slot:name>字段合并/拆分</template>
          <template v-slot:image>
            <img src="@/assets/image/head/合并.png" />
          </template>
        </ImgButton>
      </div>

      <div @click="chartConnectBoxVisible = true">
        <ImgButton>
          <template v-slot:name>多表联动</template>
          <template v-slot:image>
            <img src="@/assets/image/head/联动.png" />
          </template>
        </ImgButton>
      </div>

      <div @click="addFieldBoxVisible = true">
        <ImgButton>
          <template v-slot:name>新增列</template>
          <template v-slot:image>
            <img src="@/assets/image/head/新增列.png" />
          </template>
        </ImgButton>
      </div>

      <div @click="clearCacheBoxVisible = true">
        <ImgButton>
          <template v-slot:name>清空缓存</template>
          <template v-slot:image>
            <img src="@/assets/image/head/清除缓存.png" />
          </template>
        </ImgButton>
      </div>
    </div>

    <data-source-box
      :dataSourceVisible="dataSourceVisible"
      v-on:set-data-source-visible="setDataSourceVisible"
    ></data-source-box>

    <concat-box
      :concatBoxVisible="concatBoxVisible"
      v-on:set-concat-box-visible="setConcatBoxVisible"
    ></concat-box>

    <field-merge-split
      :mergeSplitBoxVisible="mergeSplitBoxVisible"
      v-on:set-merge-split-box-visible="setMergeSplitBoxVisible"
    ></field-merge-split>

    <chart-connect
      :chartConnectBoxVisible="chartConnectBoxVisible"
      v-on:set-chart-connect-box-visible="setChartConnectBoxVisible"
    ></chart-connect>

    <add-field
      :addFieldBoxVisible="addFieldBoxVisible"
      v-on:set-add-field-box-visible="setAddFieldBoxVisible"
    >
    </add-field>

    <clear-cache 
      :clearCacheBoxVisible="clearCacheBoxVisible"
      v-on:set-clear-cache-box-visible="setClearCacheBoxVisible"></clear-cache>
  </div>
</template>

<script>
import ImgButton from "@/components/ImgButton.vue";
import DataSourceBox from "@/components/DataSourceBox.vue";
import ConcatBox from "@/components/ConcatBox.vue";
import FieldMergeSplit from "@/components/FieldMergeSplit.vue";
import ChartConnect from "@/components/ChartConnect";
import addField from "@/components/addField";
import ClearCache from "@/components/ClearCache"
export default {
  components: {
    ImgButton,
    DataSourceBox,
    ConcatBox,
    FieldMergeSplit,
    ChartConnect,
    addField,
    ClearCache,
  },
  data() {
    return {
      concatBoxVisible: false,
      dataSourceVisible: false,
      mergeSplitBoxVisible: false,
      chartConnectBoxVisible: false,
      addFieldBoxVisible: false,
      clearCacheBoxVisible: false,
    };
  },
  methods: {
    test() {},
    setMergeSplitBoxVisible(val) {
      this.mergeSplitBoxVisible = val;
    },

    setDataSourceVisible(val) {
      this.dataSourceVisible = val;
    },
    setConcatBoxVisible(val) {
      this.concatBoxVisible = val;
    },
    setChartConnectBoxVisible(val) {
      this.chartConnectBoxVisible = val;
    },

    setAddFieldBoxVisible(val){
      this.addFieldBoxVisible = val
    },
    setClearCacheBoxVisible(val){
      this.clearCacheBoxVisible = val
    }
  },
};
</script>

<style scoped>
.head {
  display: flex;
  align-content: center;

  height:100%;
  font-size:12px;
}

.head > div {
  display:flex;
  align-content:center;

  margin-right: 50px;
}
</style>